import Navbar from '@/components/Navbar';
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { Outfit } from "next/font/google";

// Animation
import { AnimatePresence, motion } from "framer-motion";
import { useRouter } from "next/router";
import { smoothIn } from "@/animate";
import { initialize } from 'next/dist/server/lib/render-server';

const outfit = Outfit({ subsets:["latin"] });

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  return (
    <main className={outfit.className}>
      <Navbar />
        <AnimatePresence mode="wait">
          <motion.div 
          key={router.route}
          initial="initialState"
          animate="animateState"
          exit="exitState"
          transition={{
            duration: 0.75,
          }}
          variants={{
            initialState: {
              opacity:0,
              clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
            },
            animateState: {
              opacity:1,
              clipPath: "polygon(0 0, 100% 0, 100% 100%, 0% 100%)",
            },
            exitState: {
              opacity:0,
              clipPath: "polygon(50% 0, 50% 0, 50% 100%, 50% 100%)",
            },
          }}
          >
          <Component {...pageProps} />
          </motion.div>
        </AnimatePresence>
    </main>
  );
}
